<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

onMounted(() => {
  userStore.fetchUsers();
});

// 使用 computed 确保 users 是响应式的，并过滤掉管理员
const users = computed(() => userStore.users.filter(user => user.userType !== 'event_administrator'));


const updateUserType = (user: any) => {
  userStore.updateUserType(user.userId, user.userType);
};

const deleteUser = (userId: number) => {
  userStore.deleteUser(userId);
};
</script>

<template>

  <div>
    <h1>用户列表</h1>
    <a-table :dataSource="users" rowKey="userId">
      <a-table-column title="用户ID" dataIndex="userId" key="userId" />
      <a-table-column title="用户类型" key="userType">
        <template v-slot="{ text, record }">
          <a-select v-model:value="record.userType" @change="updateUserType(record)">
            <a-select-option value="regular_user">普通用户</a-select-option>
            <a-select-option value="volunteer">志愿者</a-select-option>
            <a-select-option value="event_organizer">活动组织者</a-select-option>
<!--            <a-select-option value="event_administrator">活动管理员</a-select-option>-->
          </a-select>
        </template>
      </a-table-column>
      <a-table-column title="用户电话" dataIndex="phone" key="phone" />
      <a-table-column title="操作" key="action">
        <template v-slot="{ record }">
          <a-button @click="deleteUser(record.userId)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<!--<style scoped>-->
<!--table {-->
<!--  width: 100%;-->
<!--  border-collapse: collapse;-->
<!--}-->

<!--th, td {-->
<!--  border: 1px solid black;-->
<!--  padding: 8px;-->
<!--  text-align: left;-->
<!--}-->

<!--select {-->
<!--  width: 100%;-->
<!--}-->

<!--button {-->
<!--  background-color: red;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  padding: 5px 10px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--button:hover {-->
<!--  background-color: darkred;-->
<!--}-->
<!--</style>-->
